// 默认值
// $accentColor = rgb(208, 167, 231)// 主题颜色
$textColor = #fff                   // 文本颜色
$borderColor = transparent            // 边框线颜色
// $codeBgColor = red                      // 代码块背景色
$backgroundColor = transparent                 // 悬浮块背景色
:root {
// --theme-color: hsl(280, 1%, 50%);
--theme-color: hsl(200, 26%, 55%)
}
@import url('https://fonts.googleapis.com/css?family=Bubblegum+Sans&display=swap');
@font-face { 
    font-family: pfang; 
    src: url('https://store-jielong.oss-cn-shanghai.aliyuncs.com/est/public/pf-x-j.ttf'); 
}
// 动态主题色
::-webkit-scrollbar {
    width: 0px !important;
    background-color: transparent !important;
    // width: 4px;
    // background-color: var(--theme-color);
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px var(--theme-color) !important;
    background: var(--theme-color) !important;
}
.color-picker .color-button .iconfont {
    color: var(--theme-color);
}
.pagation .pagation-list span.jump.bgprimary {
    background-color: var(--theme-color);
}
.abstract-item .title:hover a {
    color: var(--theme-color) !important;
}
.abstract-item .title:hover {
    &:after {
        background-color: var(--theme-color);
    }
}
.abstract-item .title {
    &:after {
        background-color: var(--theme-color) !important;
    }
}
.dropdown-wrapper .nav-dropdown .dropdown-item a:hover {
    color: var(--theme-color);
    text-shadow: 0 0 var(--theme-color);
}
.home-blog .home-blog-wrapper .info-wrapper .category-wrapper .category-item:hover a {
    color: var(--theme-color);
}
.global-ui .back-to-ceiling .icon {
    fill: var(--theme-color);   
}
.footer-wrapper a {
    color: var(--theme-color);
}
.sidebar ul.sidebar-links > li {
    background-color: var(--theme-color);
    a.sidebar-link:hover {
        color: var(--theme-color);
    }
    a.sidebar-link.active {
        color: var(--theme-color);
        border-color: var(--theme-color);
    }
}
.page .page-edit .last-updated .prefix {
    color: var(--theme-color);
}
.page-nav .next a {
    color: var(--theme-color);
}
.page-nav .prev a {
    color: var(--theme-color);
}
.categories-wrapper .category-wrapper .category-item:hover, .categories-wrapper .category-wrapper .category-item.active {
    background: var(--theme-color) !important;
}
.abstract-item .tags .tag-item.active {
    color: var(--theme-color);
}
#nprogress .bar {
    background: var(--theme-color) !important;
}

.links .search-box .suggestions {
    &:hover {
        color: var(--theme-color) !important;
    }    
}
.links .search-box .suggestions li{
    background: transparent;
    &:hover {
        color: var(--theme-color) !important;
        background: #f3f4f5;
        a {
            color: var(--theme-color) !important;
        }
    }
}

.page {
    .page-title {
        h1.title {
            font-weight: 700;
        }
    }
    .theme-reco-content.content__default {
        h2::before {
            border-left: 5px solid var(--theme-color) !important;
        }
        .header-anchor {
            color: var(--theme-color) !important;
        }
    }
}

// #nprogress .peg {
//     background: var(--theme-color) !important;
// }
.home-blog .hero {
    // filter: hue-rotate(90deg);
    background: var(--theme-bg) center center / cover no-repeat !important;
    margin: 0 auto;
    // padding-bottom: 2.6rem;
    // box-sizing: content-box;
    div:first-child {
        display: flex;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        h1 {
            position: relative;
            top: -7rem;
            z-index: 2;
            display: inline-block;
            color: white;
            font-size: 3.5rem;
            text-shadow: 5px 5px 15px var(--theme-color);
            font-family: 'Bubblegum Sans', pfang;
            font-weight: bold;
            text-transform: uppercase;
        }
        .description {
            display: none;    
        }
        p {
            margin: 0 auto;
            color: white;
            font-family: 'Bubblegum Sans', pfang;
            font-weight: bold;
        }
    }
    .bubble {
        position: absolute;
        background: white;
        border-radius: 100%;
    }
    transition: all 2s;
}
.home-blog .home-blog-wrapper {
    margin-top: 4.8rem;
}

.navbar .links {
    background-color: transparent;
    .color-button {
        .iconfont.reco-color {
            display: none;
        }
    }
}

body {
    font-family: pfang !important;
}
// nav
html.light .navbar {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: saturate(180%) blur(5px);
}
html.dark .navbar {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: saturate(180%) blur(15px);
}
html.dark .quote-box {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: saturate(180%) blur(15px);
    .hitokoto {
        color: #fff;
    }
    .from {
        color: #fff;
    }
}


// 搜索结果列表
html.light .links .search-box ul.suggestions {
    &:hover {
        a {
            color: #000;
        }    
    }
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--box-shadow);
}
html.light .links .search-box .suggestions li{
    background: transparent;
    &:hover {
        background: #f3f4f5;
        a {
            color: var(--theme-color);
        }
    }
}
html.dark .navbar .links .search-box ul.suggestions {
    &:hover {
        a {
            color: #d5d4d9;
        }    
    }
    background: rgba(34, 39, 46, 0.8);
    backdrop-filter: saturate(180%) blur(15px);
    box-shadow: var(--box-shadow);
}
html.dark .navbar .links .search-box .suggestions li{
    &:hover {
        background: #161516;
        span {
            color: #d5d4d9;
        }
    }
}


// 搜索框
html.light .navbar .links .search-box {
    border: none;
    input{
        color: #000;
        border: 2px solid #eaecef;
        border-radius: 17px;
        background-color: rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
        transition: all 0.5s;
        &:focus {
            border-color: var(--theme-color);
            box-shadow: 0 0 5px 1px var(--theme-color);
        }
    }
}
html.dark .navbar .links .search-box {
    border: none;
    input{
        border: 2px solid #3d4b59;
        border-radius: 17px;
        background-color: #1f2633;
        box-sizing: border-box;
        transition: all 0.5s;
        &:focus {
            border-color: #5f6a75;
            box-shadow: 0 0 5px 1px #5f6a75;
        }
    }
}

html.light {
    .nav-links a {
        &:hover {
            color: var(--theme-color);
            text-shadow: 0 0 1px var(--theme-color);
            .iconfont {
                color: var(--theme-color);
            }
            .arrow.down {
                border-top: 6px solid var(--theme-color);
            }
        }
    }
    .nav-link.router-link-exact-active.router-link-active {
        color: var(--theme-color);
        .iconfont {
            color: var(--theme-color);
        }
        &:hover {
            color: var(--theme-color);
            .iconfont {
                color: var(--theme-color);
            }
        }
    }
    .year-wrapper {
        li:hover {
            .date {
                &::before {
                    background: var(--theme-color) !important;
                }
                color: var(--theme-color) !important;
            }
            .title {
                color: var(--theme-color) !important;
            }
        }
    }
}

html.dark {
    .nav-links a {
        &:hover {
            color: #fff;
            text-shadow: 0 0 2px #fff;
            .iconfont {
                color: #fff;
            }
            .arrow.down {
                border-top: 6px solid #fff;
            }
        }
    }
    .nav-link.router-link-exact-active.router-link-active {
        color: #fff;
        .iconfont {
            color: #fff;
        }
        &:hover {
            text-shadow: 0 0 2px #fff;
            color: #fff;
            .iconfont {
                color: #fff;
            }
        }
    }
}


// 下拉二级菜单
.dropdown-wrapper .nav-dropdown {
    padding: 5px;
    li {
        border-radius: 4px;
    }
}
html.light .nav-dropdown {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    li{
        background: transparent;
        &:hover {
            background: #f3f4f5;
        }
    }
}

html.dark .dropdown-wrapper .nav-dropdown {
    background: rgba(34, 39, 46, 0.8);
    backdrop-filter: saturate(180%) blur(15px);
    li.dropdown-item{
        a {
            &:hover {
                background: #161516;
                color: #d5d4d9;
            }
            .iconfont.reco-github {
                color: #d5d4d9;
            }
        }
        
    }
}

// 主题切换面板
html.light .color-picker-menu .mode-options{
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    .color-mode-options li{
        background: rgba(255, 255, 255, 0);
    }
    .color-mode-options li.active{
        background: var(--theme-color);
    }
}
html.dark .color-picker-menu .mode-options{
    background: rgba(34, 39, 46, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    .color-mode-options li{
        background: rgba(255, 255, 255, 0);
    }
    .color-mode-options li.active{
        background: var(--theme-color);
    }
}

html.dark {
    .jumpinp input{
        color: #fff;    
    }
}


// html.light {
    #valine {
        .vpanel {
            .vheader {
                input {
                    &:focus {
                        border-bottom: 2px solid var(--theme-color) !important;
                    }
                }
            }
            .vrow .vsubmit.vbtn:hover {
                color: var(--theme-color);
                border-color: var(--theme-color);
            }
        }
        .vcards {
            .vhead .vnick {
                color: var(--theme-color) !important;    
            }
            .vmeta .vat:hover {
                color: var(--theme-color) !important;
                border-color: var(--theme-color) !important;
            }
        }
        .vpower {
            a {
                color: var(--theme-color) !important;
            }
        }
    }
// }

.page .side-bar.sub-sidebar-wrapper {
    right: 8rem; 
    li.level-2 {
        border-left: 2px solid var(--border-color)
        a:hover {
            font-weight: 700;
            color: var(--theme-color)
        }
    } 
    li:hover a {
        color: var(--theme-color)
    }
    li.level-2.active {
        border-left: 2px solid var(--theme-color);
        a {
            font-weight: 700;
            color: var(--theme-color)
        }
    }
}

@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    transtion: all 1s;
    background: var(--theme-color);
    z-index: 50;
}


.loading {
  margin: auto;
  display: flex;
  color: white;
  font-size: 5em;
  font-family: "Baloo Bhaijaan", pfang;
  text-transform: uppercase;
}
.loading span {
  text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(20px);
  animation: bounce 0.3s ease infinite alternate;
}

@keyframes bounce {
  to {
    text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
  }
}
